<!--父级页面:控制除登录页以外所有子级贞面共有的左侧莱单栏与顶部条-->
<template>
  <div style="display: flex;">
    <div :style="{width:(isCollapse?'64px':'208px')}">
      <!--左侧菜单栏-->
      <el-menu
          background-color="#545c64"
          style="width:100%;height:100vh;"
          default-active="2"
          text-color="#fff"
          active-text-color="#ffd04b"
          unique-opened
          router
          :collapse="isCollapse"
          :collapse-transition="false"
      >
        <!--左侧菜单栏顶部条-->
        <el-row style="padding-top: 10px">
          <el-col :span="2"></el-col>
          <el-col :span="7" style="padding-left:7px;">
            <el-image src="/img/login/EAMS.png"
                       style="width: 35px;margin-top: 3px;
                       height:35px;"/>
          </el-col>
          <el-col :span="isCollapse ? 0 : 15 ">
            <span style="color:#fff;
                         font-weight: bold;
                         position:relative;
                         top:8px;
                         left:2px;">
              资产管理系统
            </span>
          </el-col>
        </el-row>

        <!-- 渲染没有子菜单的菜单项 -->
        <el-menu-item
            v-for="item in noChildrenMenuItems"
            :index="item.path"
            :key="item.path"
            @click="clickMenu(item)"
            style="margin-top: 15px"
        >
          <component style="width: 21px; height: 21px;" :is="item.icon"/>
          <span style="margin-left: 10px;">{{ item.label }}</span>
        </el-menu-item>

        <!-- 渲染有子菜单的菜单项 -->
        <el-sub-menu
            v-for="item in hasChildrenMenuItems"
            :index="item.label"
            :key="item.path"
        >
          <template #title>
            <component style="width: 21px; height: 21px;" :is="item.icon"/>
            <span style="margin-left: 10px;">{{ item.label }}</span>
          </template>
          <el-menu-item
              v-for="(subItem, subIndex) in item.children"
              :index="subItem.path"
              :key="subIndex"
              @click="clickMenu(subItem)"
          >
            <span style="margin-left: 10px;">{{ subItem.label }}</span>
          </el-menu-item>
        </el-sub-menu>

      </el-menu>
    </div>
    <div :style="{width:(isCollapse?'calc(100% - 64px)':'calc(100% - 208px)')}">
      <!--右侧顶部条-->
      <el-header style="padding-top: 22px;
                        height: 10vh;
                        background-color: #fff;">
        <el-row :gutter="10">
          <el-col :span="18">
            <el-icon @click="changeCollapsed">
              <Menu/>
            </el-icon>
          </el-col>
          <el-col :span="6" style="position: relative">
            <el-dropdown trigger="click"
                         style="position: absolute;
                                right: 20px;">
              <!--获取用户头像-->
              <el-avatar :src="avatarUrl" style="width: 40px; height: 40px;"/>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="Info">个人信息</el-dropdown-item>
                  <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
        </el-row>
        <!--面包屑-->
        <el-breadcrumb separator="/" style="position: relative;
                                            top: 20px;">
          <el-breadcrumb-item :to="{ path: '/' }">
            <span style="font-weight: bold;">首页</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item v-for="item in breadcrumb">{{ item }}</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>
      <el-main style="height: 90vh;
                      padding: 0;
                      overflow-y: auto">
        <!--右侧可变区域-->
        <router-view/>
      </el-main>

    </div>
  </div>
</template>

<script setup>
import {computed, onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {useStore} from "vuex";
import {ElMessageBox} from "element-plus";

const isCollapse = ref(false);
const changeCollapsed = () => {
  isCollapse.value = !isCollapse.value;
}
const user = ref(getUser());
// 使用 useStore 获取 store 实例
const store = useStore();
// 计算属性，基于 Vuex 的 getter 来获取最新的用户头像
const userAvatar = computed(() => store.getters.getUserAvatar);
// 动态选择头像来源：如果 userAvatar 存在，则使用它；否则使用 employee.avatar
const avatarUrl = computed(() => {
  return BASE_URL + (userAvatar.value ? userAvatar.value : getUser().avatar);
});

const logout = () => {
  ElMessageBox.confirm('是否确认退出登录？', '提示', {
    customClass: 'custom-message-box',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    confirm();
  }).catch(() => {
    // 取消没有操作
  })
}

const confirm = () => {
  localStorage.removeItem('user');
  router.push("/login");
  user.value = '';
}
const Info = () => {
  let id = user.value.id;
  router.push('/info?id=' + id);
}
// 定义数组用来维护当前面包屑导航显示的值
const breadcrumb = ref();
// 定义对象用来维护路由path与面包屑数组值的对应关系
let map = {
  '/homepage': [],
  '/info': ['个人信息'],
  '/fixed': ['资产管理', '固定资产'],
  '/build': ['资产管理', '楼宇管理'],
  '/room': ['资产管理', '房间管理'],
  '/virtual': ['资产管理', '虚拟资产'],
  '/supplier': ['资产管理', '供应商'],
  '/attachment': ['资产管理', '附件表'],
  '/user': ['用户管理', '用户列表'],
  '/dict': ['数据字典', '字典管理'],
  '/dictOption': ['数据字典', '字典项管理'],
  '/applicationList': ['申请管理', '申请列表'],
  '/apply': ['申请管理', '申请页面'],
  '/audit': ['审批管理', '审核列表'],
  '/distribute': ['审批管理', '分配列表'],
  '/details': ['资产管理', '资产详情'],
  '/bus': ['资产管理', '校车'],


}
const route = useRoute();
const menuList = ref([
  {path: '/homepage', icon: 'House', label: '首页'},
  {
    icon: 'Suitcase', label: '资产管理',
    children: [
      {path: '/fixed', label: '固定资产'},
      {path: '/virtual', label: '虚拟资产'},
      {path: '/supplier', label: '供应商'},
      {path: '/attachment', label: '附件表'},
      {path: '/bus', label: '校车'}
    ]
  },
  {
    icon: 'OfficeBuilding', label: '楼宇管理',
    children: [
      {path: '/build', label: '楼宇管理'},
    ]
  },
  {
    icon: 'User', label: '用户管理',
    children: [
      {path: '/user', label: '用户列表'},
    ]
  },
  {
    icon: 'Edit', label: '申请管理',
    children: [
      {path: '/applicationList', label: '申请列表'},
    ]
  },
  {
    icon: 'Finished', label: '审批管理',
    children: [
      {path: '/audit', label: '审核列表'},
      {path: 'distribute',label: '分配列表'}
    ]
  },
  {
    icon: 'Setting', label: '数据字典',
    children: [
      {path: '/dict', label: '字典管理'},
    ]
  }

]);
// 计算属性：过滤出没有子菜单的菜单项
const noChildrenMenuItems = computed(() =>
    menuList.value.filter(item => !item.children)
);

// 计算属性：过滤出有子菜单的菜单项
const hasChildrenMenuItems = computed(() =>
    menuList.value.filter(item => item.children && item.children.length > 0)
);

// 点击菜单项时触发
const clickMenu = (item) => {
  router.push({
    path: item.path,
  });
};


const updateBreadcrumb = (route) => {
  const path = route.path;
  breadcrumb.value = map[path] || ['首页'];
}
onMounted(() => {
  updateBreadcrumb(route);
});
const router = useRouter();
router.beforeEach((to, from, next) => {
  updateBreadcrumb(to);
  next();
})
</script>

